<template>
  <div class="login-wrap">
    <el-form :model="users" class="demo-ruleForm login-container">
      <h1 style="text-align: center;">用户注册</h1>
      <p style="text-align: center;">山东省高考志愿填报决策系统</p>
      <el-form-item style="text-align: center">
        <el-input v-model="users.name" placeholder="用户名"  style="width:80%"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-input type="password" v-model="users.password" placeholder="密码" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-input placeholder="输入您的高考分数" style="width:80%" v-model="users.score"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-select v-model="subjects" multiple placeholder="请选择选课类型" style="width:80%">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-row>
          <el-col :span="24"  style="text-align: center">
            <div class="grid-content bg-purple-dark">
              <el-button type="primary" style="width:80% ;" @click="saveInfo()">提交</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="text-align: center">
              <el-link type="success" @click="toLogin">用户登录</el-link>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="text-align: center">
              <el-link type="success">忘记密码</el-link>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default{
        data(){
            return{
                users:{},
                src:"",
                subjects:[],
                isExists:0,
                options: [{
                    value: '物理',
                    label: '物理'
                }, {
                    value: '化学',
                    label: '化学'
                }, {
                    value: '生物',
                    label: '生物'
                }, {
                    value: '政治',
                    label: '政治'
                }, {
                    value: '历史',
                    label: '历史'
                }, {
                    value: '地理',
                    label: '地理'
                }
                ]
            };
        },
        methods:{
            toLogin(){
                this.$router.push({
                    path:'/Login'
                });
            },
            saveInfo(){
                console.log(this.users.name + " " + this.users.password + " " + this.subjects.toString() + " "+ this.users.score);
                if(!this.users.name){
                    alert("用户名不能为空!")
                    return;
                }
                this.$axios.get("http://localhost:8080/users/findUsersByNameWhileReg?name="+this.users.name).then((res)=>{
                    if(res.data===0){
                        alert("该用户名已被占用!")
                    }else {
                        if(!this.users.password){
                            alert("密码不能为空!")
                            return;
                        }
                        if(this.subjects.length!==3){
                            alert("选课类型数目必须为3!")
                            return;
                        }
                        if(this.users.score>750 || this.users.score<0){
                            alert("分数值异常, 请输入你正确的分数!")
                            return;
                        }
                        this.$axios.post('http://localhost:8080/users/register', {
                            name: this.users.name,
                            password: this.users.password,
                            type: this.subjects.toString(),
                            score: this.users.score
                        }).then(function (response) {
                            console.log(response);
                            alert("注册成功!");

                        }).catch(function (error) {
                                console.log(error);
                            });
                    }
                });
            }
        }
    }
</script>

<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 700px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .el-select{
    width: 250px;
  }
</style>

